<template>
  <div class="update"
       v-if="flag">
    <div class="img">
      <p class="title">检测到新版本</p>
      <p class="text"
         v-html="text"></p>
      <button class="btn"
              @click="update">立即更新</button>
      <span class="link"
            @click="rest">以后再说</span>
      <img :src="updateBg"
           alt="">
    </div>
  </div>
</template>

<script>
import { setStore, getStore } from '@/util/store.js';
import { validatenull } from '@/util/validate';
import Bus from '@/util/bus.js';
import { getVersion, file } from '@/cordova/';
import { checkUpdate } from '@/api/common';
import { calcDate } from '@/util/date.js';
import updateBg from '@/assets/img/updateBg.png';
import { mapGetters } from 'vuex'
  ;

export default {
  name: 'update',
  data() {
    return {
      flag: false,
      version: '',
      text: '',
      href: '',
      updateBg,
      type: false,
      speed: '',
      fileObj: '',
      updateInfo: {
        filename: '',
        url: '',
      },
    };
  },
  created() {
    Bus.$on('checkupdate', (type) => {
      this.type = type || false;
      this.init();
    });
  },
  computed: {
    ...mapGetters(['website']),
  },
  methods: {
    upload() {
      file().then((res) => {
        this.fileObj = res;
        this.fileObj.mkdir(this.website.package).then(() => {
          this.fileObj.download(
            this.website.package + this.updateInfo.filename,
            this.updateInfo.url,
            this.onprogress,
            this.success,
            this.err,
            null,
          );
        });
      });
    },
    onprogress(e) {
      if (e.lengthComputable) {
        this.speed = (`${e.loaded / e.total}`).substring(0, 4);
        const toast = this.$toast.loading({
          duration: 0, // 持续展示 toast
          forbidClick: true, // 禁用背景点击
          loadingType: 'spinner',
          message: `正在更新${parseInt(this.speed * 100)}%`,
        });
      }
    },
    success(entry) {
      this.$toast.clear();
      this.fileObj.run(entry.toURL(), app);
    },
    err(err) {
      this.$toast.clear();
      this.$dialog.alert({
        message: '下载失败！',
      });
    },
    init() {
      this.version = require('../../../../package.json').version;
      const update = getStore({ name: 'update', debug: true });
      if (this.type) {
        this.check();
      } else if (!validatenull(update)) {
        const date = calcDate(update.datetime, new Date().getTime());
        if (date.days > 1) this.check();
      } else {
        this.check();
      }
    },
    check() {
      this.$toast.loading({
        duration: 0,
        forbidClick: true,
        mask: true,
        message: '检测更新中...',
      });

      checkUpdate().then((res) => {
        this.$toast.clear();
        const data = res.data.data;
        if (this.version != data.version) {
          this.text = data.detail;
          this.href = data.url;
          this.updateInfo.url = data.url;
          this.updateInfo.filename = `/${data.version}.apk`;
          this.flag = true;
          if (!this.type) setStore({ name: 'update', content: true });
        } else if (this.type) {
          this.$message.success({
            message: '最新版本，无需更新',
            duration: 1500,
          });
        }
      });
    },
    update() {
      this.upload();
      this.flag = false;
    },
    rest() {
      this.flag = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.update {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  text-align: center;
  z-index: 888;
  .img {
    position: relative;
    margin-top: 60px;
    width: 220px;
    .title {
      position: absolute;
      top: 25px;
      width: 100%;
      font-size: 16px;
    }
    .text {
      position: absolute;
      top: 60px;
      width: 100%;
      height: 100px;
      overflow: hidden;
      overflow-y: scroll;
      font-size: 12px;
      line-height: 20px;
    }
    .btn {
      $height: 60px;
      position: absolute;
      left: calc(50% - 30px);
      top: 165px;
      width: $height;
      height: $height;
      background-color: transparent;
      border: none;
      border-radius: 100%;
      color: #fff;
    }
    .link {
      position: absolute;
      left: 0;
      top: 250px;
      width: 100%;
      color: #ff6b6d;
      text-decoration: underline;
    }
    img {
      width: 100%;
    }
  }
}
</style>

